<template>
  <el-card class="box-card comment">
    <div slot="header" class="clearfix">
      <span>评论</span>
    </div>
    <ul v-if="this.commentList.length > 0" class="infinite-list"  style="overflow:auto">
      <template v-for="(item,id) in commentList">
      <li  class="infinite-list-item" :key="id">
        <span style="color: #a6a2a2;text-decoration: none;">{{item.userName}}</span>
        <span class="ua">{{item.genTime}}</span><br/>
        <div style="height: 10px;width: 100%;"></div>
        <span style="line-height:120%">{{item.content}}</span>
      </li>
      <hr size="1px" color="#dcdfe6"/>
      </template>
    </ul>
    <pagination v-if="showSizes"
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getComment"
    />
    <el-pagination v-else
      v-show="total>0"
      :current-page.sync="queryParams.pageNum"
      layout="prev, pager, next, jumper"
      @current-change="getComment"
      :total="total">
    </el-pagination>
    <div >
      <el-form class="commentForm" ref="comment" :model="formData" :rules="rules" size="medium" label-width="100px"
        label-position="top">
        <el-row type="flex" justify="start" align="top"  :gutter="20" v-if="!isLogin">
          <el-col :span="12">
            <el-form-item label="名称" prop="userName">
              <el-input v-model="formData.userName" placeholder="请输入名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="userEmail" >
              <el-input v-model="formData.userEmail" placeholder="请输入邮箱" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="" prop="content">
          <el-input v-model="formData.content" type="textarea" placeholder="请输入评论内容"
            :autosize="{minRows: 3, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item size="large" style="text-align: center;" >
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button style="margin-left: 30px;" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>
<script>
import {listCommentFromIndex,addCommentFromIndex } from "@/api/blog/comment";

export default {
  components: {},
  props: {
    blogId:{
      type: Number,
      default(){
        return 0;
      }
    },
    showSizes: {
      type: Boolean,
      default(){
        return true;
      }
    }
  },
  data() {
    return {
      formData: {
        userName: undefined,
        userEmail: undefined,
        content: '',
        blogId: null,
      },
      rules: {
        userName: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        userEmail: [{
          required: true,
          message: '请输入邮箱',
          trigger: 'blur'
        }],
        content: [{
          required: true,
          message: '请输入评论内容',
          trigger: 'blur'
        }],
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        blogId: 0,
      },
      isLogin: false,
      commentList: [],
      total: 0,
    }
  },
  computed: {},
  watch: {},
  created() {
    if(this.$store.state.user.name != ""){
      this.isLogin = true;
      this.rules.userEmail.required = false;
      this.rules.userName.required = false;
    }
    this.getComment();
  },
  mounted() {},
  methods: {
    getComment(){
      this.queryParams.blogId = this.blogId;
      this.formData.blogId = this.blogId;
      listCommentFromIndex(this.queryParams).then(response =>{
        console.log(this.queryParams);
        this.commentList = response.rows;
        this.total = response.total;
      })
    },
    submitForm() {
      this.$refs['comment'].validate(valid => {
        if (!valid) return
        addCommentFromIndex(this.formData).then(response =>{
          if(response.code == 200){
            this.$modal.msgSuccess("评论成功！");
            this.getComment();
            this.resetForm()
          }else{
            this.$modal.msgError(response.message);
          }
        });
      })
    },
    resetForm() {
      this.$refs['comment'].resetFields()
    },
  }
}

</script>
<style>
.comment{
  margin: 5px 10px 5px 10px;
}
.infinite-list-item{
  height: auto;
  margin: 10px;
  color: rgba(100, 98, 98, 0.93);
}
.infinite-list{
  height: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}
.ua{
  padding: 3px 5px;
  background: #F5F8F9;
  color: #262525;
  font-size: .75rem;
  border-radius: 0.2rem;
  margin-right: 0.3rem;
}
.commentForm{
  margin-top: 20px;
}
</style>
